<template>
  <el-popover placement="bottom" width="300" trigger="focus" v-model="visible">
    <el-input v-model="value" clearable prefix-icon="el-icon-search" size="mini" slot="reference" placeholder="请输入歌曲名、歌手、专辑" @focus="getHotList" @input="getSug" @keyup.enter.native="onSubmit" ref="input"></el-input>
    <!-- 热搜榜 -->
    <div v-if="!value">
      <h4>热搜榜</h4>
      <div class="hotList" v-for="(item, index) in hotList" :key="index" @click="hotClick(item.searchWord)">
        <span :class="{ active: index < 3 }">{{ index + 1 }}</span>
        <span :class="{ activeItem: index < 3 }">{{ item.searchWord }}</span>
      </div>
    </div>
    <!-- 搜索建议 -->
    <div class="suggest" v-else>
      <h4><i class="iconfont icon-yinle"></i> 单曲</h4>
      <div class="sugList" v-for="item in result.songs" :key="item.id">
        <span @click="songsClick(item.id)">{{ item.name + '-' + item.artists[0].name }}</span>
      </div>
      <h4><i class="iconfont icon-yonghu1"></i> 歌手</h4>
      <div class="sugList" v-for="item in result.artists" :key="item.id">
        <span @click="itemClick('/artistdetail/', item.id)">{{ item.name }}</span>
      </div>
      <h4><i class="iconfont icon-zhuanji"></i> 专辑</h4>
      <div class="sugList" v-for="item in result.albums" :key="item.id">
        <span @click="itemClick('/albumdetail/', item.id)">{{ item.name }}-{{ item.artist.name }}</span>
      </div>
      <h4><i class="iconfont icon-gedan"></i> 歌单</h4>
      <div class="sugList" v-for="item in result.playlists" :key="item.id">
        <span @click="itemClick('/songsmenudetail/', item.id)">{{ item.name }}</span>
      </div>
    </div>
  </el-popover>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      visible: false, //popover显隐
      value: '', //input输入值
      hotList: [],
      result: '',
      timer: null,
    };
  },
  methods: {
    ...mapMutations(['getSongsId']),
    //获取热搜列表
    async getHotList() {
      if (this.value) return this.getSug();
      const { data } = await this.$request('/search/hot/detail');
      this.hotList = data;
    },
    //获取搜索建议
    getSug() {
      if (!this.value) return;
      //防抖处理
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        const { result } = await this.$request('/search/suggest', { keywords: this.value });
        if (!result) return;
        this.result = result;
      }, 500);
    },
    //热搜榜点击
    hotClick(value) {
      this.value = value;
      this.searchDetail();
    },
    //搜索详情跳转
    searchDetail() {
      this.visible = false;
      this.$router.replace('/searchdetail/' + this.value).catch((err) => {});
    },
    //键盘确认点击
    onSubmit(e) {
      if (e.keyCode == 13 && this.value != '') {
        //点击enter使input框失去焦点
        this.$refs.input.blur();
        this.searchDetail();
      }
    },
    //单曲点击
    songsClick(id) {
      this.getSongsId(id);
      this.visible = false;
    },
    //歌单、歌手、专辑点击
    itemClick(type, id) {
      this.$router.replace(type + id);
      this.visible = false;
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
:deep .el-input__inner {
  border: none;
  border-radius: 25px;
}
.hotList {
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
  &:hover {
    background-color: $grayHover;
  }
  :first-child {
    display: inline-block;
    text-align: center;
    width: 20px;
  }
  .active {
    color: $themeColor;
    font-weight: 600;
  }
  .activeItem {
    font-weight: 600;
    color: black;
  }
}
.sugList {
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  &:hover {
    background-color: $grayHover;
  }
}
</style>